{% extends "base.html" %}
{% block title %}我的通知 - Online Judge{% endblock %}

{% block content %}
<div class="container mx-auto py-8">
  <h1 class="text-2xl font-bold text-gray-800 mb-6">我的通知</h1>
  
  {% if notes %}
    <div class="space-y-4">
      {% for note in notes %}
        <div class="bg-white rounded-lg shadow p-4 border-l-4 
          {% if not note.is_read %}border-l-red-500{% else %}border-l-gray-300{% endif %}">
          <div class="flex justify-between items-start">
            <p class="text-gray-700">{{ note.content }}</p>
            <span class="text-gray-400 text-sm">{{ note.created_at.strftime('%Y-%m-%d %H:%M') }}</span>
          </div>
          {% if not note.is_read %}
            <button onclick="markAsRead({{ note.id }})" class="mt-2 text-sm text-blue-500 hover:text-blue-600">
              标记为已读
            </button>
          {% endif %}
        </div>
      {% endfor %}
    </div>
  {% else %}
    <div class="text-center py-12 bg-gray-50 rounded-lg">
      <i class="fas fa-bell-slash text-5xl text-gray-300 mb-4"></i>
      <p class="text-gray-500">暂无通知</p>
    </div>
  {% endif %}
</div>

<script>
  // 标记通知为已读
  function markAsRead(noteId) {
    // 生成正确的请求URL（基础路由 + 通知ID）
    const baseUrl = "{{ url_for('mark_notify_read', notify_id=0) }}".replace('0', '');
    fetch(baseUrl + noteId, { 
      method: 'POST',
      headers: {
        'X-CSRFToken': "{{ csrf_token() }}"  // 补充CSRF令牌，避免403错误
      }
    })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        location.reload();  // 刷新页面更新状态
      }
    })
    .catch(error => console.error('标记失败:', error));
  }
</script>
{% endblock %}